<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图书管理</title>
    <style>
        [v-cloak]{ display: none }
        #box{
            width: 600px;
            margin: auto;
        }
        #box h2{
            text-align: center;
        }
        table{
            width: 100%;
            border-collapse: collapse;
        }
        table th{
            background-color:lightskyblue;
        }
        table td,table th{
            border: 1px solid #000;
        }
        table tbody td{
            width: 25%;
            text-align: center;
        }

    </style>
    <script src="../Ajs/vue.min.js"></script>
    <script src="../Ajs/axios.js"></script>
</head>
<body>
    <div id="box" v-cloak>
        <h2>图书管理</h2>
        <div style="text-indent:30px" >
            id：<input type="text" v-model="c_id" :disabled="flag" v-focus>
            图书： <input type="text" v-model="c_bookName">
            <input type="button" value="提交" @click="sub">
        </div>
        <div style="text-align: center;margin: 10px 0">
            一共有 {{compNum}}条数据
        </div>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>id</th>
                        <th>图书</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item,index) in books" :key="index">
                        <td>{{item.id}}</td>
                        <td>{{item.bookName}}</td>
                        <td>{{item.date | date_format("YYYY-MM-DD")}}</td>
                        <td>
                            <a href="" @click.prevent="enit(item)">编辑</a>
                            <span> | </span>
                            <a href="" @click.prevent="del(item,index)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

    <script>
        Vue.directive("focus",{
            inserted:function(el){
                el.focus();
            }
        });
        Vue.filter("date_format",function(v1,v2){
            var date = new Date(v1);
            var format = v2;
            var weekday = ["日","一","二","三","四","五","六",];
            var config = {
                YYYY: date.getFullYear(),
                MM:(date.getMonth() + 1) < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1,
                DD: date.getDate() < 10 ? "0" + date.getDate() : date.getDate(),
                hh: date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
                mm:date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
                ss: date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(),
                W:weekday[date.getDay()]
            };

            for(var key1 in config){
                format = format.replace(key1,config[key1]);
            }
            return format;
        });

        var vm = new Vue({
            el:"#box",
            data:{
                flag:false,
                c_id:"",
                c_bookName:"",
                books:[]
            },
            computed:{
                compNum(){
                    return this.books.length;
                }
            },
            methods:{
                sub(){
                    if(this.flag){  //说明处于编辑状态
                        var $this = this;
                        this.books.some(function(item){
                            if($this.c_id == item.id){
                                item.bookName = $this.c_bookName;
                                return true;
                            }
                        });
                        this.flag = false;
                    }else{
                        if(this.c_id == ""|| this.c_bookName ==""){
                            alert("请填写完成");
                        }else{
                            var obj = {};
                            obj.id = this.c_id;
                            obj.bookName = this.c_bookName;
                            obj.date = new Date().getTime();
                            this.books.push(obj);
                        }

                    }
                    this.c_id = this.c_bookName = "";
                },
                enit(data){
                    this.c_id = data.id;
                    this.c_bookName = data.bookName;
                    this.flag = true;
                },
                del(data,ind){
                    console.log(data,ind);
                    this.books.splice(ind,1);
                }
            },
            mounted(){
                var $this = this;
                axios.get("../AData/data.json")
                    .then(function(res){
                        console.log(res.data.value);
                        $this.books = res.data.value;
                    });
                // this.books = arr;
            }
        })
    </script>
</body>
</html>
